// 懒加载加载商品列表
$(function() {

    var container = document.querySelector(".container");
    let height_array;
    var token = getCookie("token");

    function init() {
        let res = $.ajax({
                url: "http://127.0.0.1:8888/goods/list",
                data: { current: 3, pagesize: 30 },
                dataType: "json"
            })
            .then(function(res) {
                console.log(res)
                renderPage(res);
                sort();
                $(".lazy").lazyload();

            })
    }
    //ajax获取id来渲染页面
    // function renderPage(res) {
    //     container.innerHTML = res.list.map(
    //         item =>
    //         `<div class="goods">


    //                       <img class="lazy"  data-original="${item.img_big_logo}" alt="">
    //                       <h1>${item.title}</h1>
    //                       <h2>${item.price}</h2>
    //                       <p><button data-id="${item.goods_id}" class="btn">加入购物车</button></p>
    //                       <p>
    //                       <a href="deajax.html#id=${item.goods_id}">
    //                       <button data-id="${item.goods_id}" class="btn1">
    //                       跳转到详情页
    //                       </button> </a>
    //                       </p>
    //                 </div>`
    //     ).join("");
    // }



    // jQuery获取id来渲染页面
    function renderPage(res) {
        container.innerHTML = res.list.map(
            item =>
            `<div class="goods">
                          <img class="lazy"  data-original="${item.img_big_logo}" alt="">
                          <h1>${item.title}</h1>
                          <h2>${item.price}</h2>
                          <p><button data-id="${item.goods_id}" class="btn btn-danger btn-small">加入购物车</button></p>
                          <p>
                          <a href="detail.html#id=${item.goods_id}"   target = "_blank" >
                          <button data-id="${item.goods_id}" class="btn1">
                          跳转到详情页
                          </button></a>
                          </p>
                    </div>`
        ).join("");
    }


    // 排序

    // 瀑布流排序 : 
    function sort() {
        let $goods = $(".goods")
            // 分割 : 第一行的元素和其他的元素; 
            // 存储瀑布流每一列的高度; 
        height_array = [];
        let offset_array = [];
        $.each($goods, function(index, ele) {
            // 区分第一行的元素; 
            if (index < 6) {
                height_array.push($(ele).outerHeight());
                // 记录每个元素的left值; 
                // - 参照物应该是外部的定位元素; 
                offset_array.push($(ele).position().left);
            } else {
                // 其余等待排列的元素
                // 在数组之中取得最小值高度; 
                let min_height = Math.min.apply(false, height_array);
                // 取出offset_array 之中和最小高度下标相同位置的left值，并把这个left值赋值给当前的元素;
                let min_index = height_array.indexOf(min_height);
                let _left = offset_array[min_index]

                // 把剩余等待排列的元素放到最小高度元素的下面; 
                $(ele).css({
                    // position: "absolute",
                    top: min_height,
                    left: _left
                });

                // 记录当前拼接好的数据， 给height_array 增加的高度; 
                height_array[min_index] += $(ele).outerHeight();
            }
        })
        console.log(height_array);
        console.log(offset_array);

    }

    let t = null;
    let loading = false;
    $(window).scroll(function() {
        if (typeof t === "number") {
            return false;
        }
        t = setTimeout(function() {
            t = null;
            var scrollTop = $("html,body").scrollTop();
            // console.log(scrollTop);
            // 设置一个阈值; 
            // - 确定什么时候我们去加载新数据， 渲染页面; 
            // - 阈值的由来 : 我们什么时候图片加载到页面最下方了，那么我们什么时候去进行图片加载; 
            // - 判断如果显示到了高度数组之中最矮的那一列高度那么我们就开始加载; 
            let min_height = parseInt(Math.min.apply(false, height_array));

            // 怎么判断元素显示; 
            var scrollTop = $("html,body").scrollTop();
            // 判定必须没有开始加载图片，我们采取判定是否应该加载图片; 
            if (!loading && (scrollTop + innerHeight + 200 > min_height)) {
                loading = true;
                // console.log("加载图片");
                init()
            }

        }, 100)
    })




    $(".container").on("click", ".btn", handlerAddCart);

    function handlerAddCart() {
        var user_id = getCookie("userid");
        var goods_id = $(this).attr("data-id");
        console.log(user_id, goods_id);

        var options = {
            url: `http://127.0.0.1:8888/cart/add?id=${user_id}&goodsId=${goods_id}`,
            type: "post",
            data: {
                id: user_id,
                goodsId: goods_id
            },
            headers: {
                authorization: token
            }
        }
        $.ajax(options)
            .done(function(data) {

                console.log(data)
                handlerAjax(data);
            });
    }

    function handlerAjax(data) {
        switch (data.code) {
            case 1:
                alert(data.message);
                break;

            case 401:
                alert("抱歉您还没有登录，请登录后再去加入购物车");
                location.href = "./login.html#goods";
                break;

        }
    }


    //点击跳转到详情页得时候会发生跳转，然后就行页面得渲染
    // 获取商品得详细信息`localhost:8888/goods/item`
    $(".container").on("click", ".btn1", handlerPage);

    function handlerPage() {
        var goods_id = parseInt($(this).attr("data-id"));

        console.log($(this), goods_id);

        var options = {
            url: `http://127.0.0.1:8888/goods/item`,
            type: "get",
            data: {
                id: goods_id,
            }
        }
        $.ajax(options)
            .done(function(res) {
                console.log(res);
                handlerDetailPage(res);
            })
    }


    function handlerDetailPage(res) {
        setTimeout(function() {
            location.href = "./detailjquery.html"
        })

    }
    init();


    $(".cate-all").mouseover(function() {
        $(".list").show();
    })
    $(".cate-all").mouseout(function() {
        $(".list").hide();
    })
})